<template>
  <a-input-group compact>
    <a-select v-model="type" style="width: 130px">
      <a-select-option value="alipay"> 支付宝 </a-select-option>
      <a-select-option value="bank"> 银行卡支付 </a-select-option>
    </a-select>
    <a-input style="width: calc(100%-130px)" v-model="number" />
  </a-input-group>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
    },
  },
  watch:{
    value(val)
    {
      Object.assign(this.val);
    }
  },
  data() {
    const { type, number } = this.value || {};
    return {
      type: type || "alipay",
      number: number || "",
    };
  },
  methods: {
    handleTypeChange(val) {
      this.$emit("change", { ...this.value, type: val });
    },
    handleNumberChange(e) {
      this.$emit("change", { ...this.value, type: e.target });
    },
  },
};
</script>

<style>
</style>